<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>chat</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            function sendMessage() {
                // 获取表单中的输入值
                let message = $("#message").val(); // 获取id为message的输入框的值

                // 构造要发送的数据
                let question = {
                    question: message // 假设后端接收的字段名为'question'
                };

                fetch("http://127.0.0.1:8080/chat_with_me", {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json;charset=UTF-8"
                    },
                    // 使用JSON.stringify将JavaScript对象转换为JSON字符串
                    body: JSON.stringify(question)
                })
                .then(response => response.text()) // 应该是response.json()来解析JSON响应
                .then(text => {
                    console.log(text);
                    // 更新聊天视图的代码，例如：
                    // $('#chat-messages').append('<p>' + text.answer + '</p>');
                })
                .catch(error => console.error("Error:", error));
            }

            $("#chat-form").submit(function(event) {
                event.preventDefault();
                sendMessage();
            });
        });
    </script>


<body>
    <div>
        <div id="chat-container">
            <div id="chat-messages"></div>
            <form id="chat-form">
                <input type="text" id="message" placeholder="请输入你的问题">
                <button type="submit">Send</button>
            </form>
        </div>
    </div>
</body>
</head>
</html>
